<template>
	<view class="gradient-background">
	<view class="secondbody">
		<view style="width:100%; height:50px; border: 0px solid red; display: flex; justify-content: center; align-items: center;">
		</view>
		<view class="header">
			<view style="width:25%; height:100%; border: 0px solid red; display: flex; justify-content: center; align-items: center;">
				<TnAvatar :url="headimg" size="xl" />
			</view>
			<view style="width:75%; height:100%; border: 0px solid red;">
				<view
					style="width:100%; height:60%; border: 0px solid red; display: flex; justify-content: left; align-items: flex-end;">
					<b>{{ username }}</b>
				</view>
			</view>
		</view>


		<view class="curcount">
			<view class="curText"  style=" color:white;">
				当前可用次数
			</view>

			<view class="curText">
				<view style="width:50%; font-size:30px; color:white;">
					<b> {{ countnum }} </b>
				</view>
			<view style="width:50%; display: flex; justify-content: right; align-items: center; padding-right: 10px;">

					<TnButton bg-color="#5F59F7" text-color="tn-white" size="xl" font-size="30" @click="handleClick">
						增加次数</TnButton>
				</view>
			</view>


		</view>

		<view class="shouyi"  v-show="userproxy">
			<view class="shouyiText">
				<view style="width:50%;">
					<b>我的收益</b>
				</view>

				<view  
					style="width:50%; font-size:10px; display: flex; justify-content: right; align-items: center; padding-right: 10px; ">
					<b  @click="detailContent" > 查看怎么挣钱> </b>
				</view>
			</view>

			<view class="shouyiText" style="color:#FFC540"  >
				<span style="margin-top: 20px;"> ¥ </span> &nbsp; <b style="font-size:40px;"> {{income}} </b>
			</view>

			<view class="shouyiText">
				<view style="width:50%; font-size:10px; margin-top: 20px; ">
					目前推广人数：29
				</view>

				<view
					style="width:50%; display: flex; justify-content: right; align-items: center; padding-right: 10px; ">

					<TnButton  open-type="share"  bg-color="#5F59F7" text-color="tn-white" size="xl" font-size="30">分享赚钱</TnButton>
				</view>
			</view>
		</view>

		<view class="otherinfo" style="width:100%; height:100px;">
			<view>
				<b> 意见反馈 </b>
			</view>
			<view>
				客服电话：010-58621160
			</view>
			<view>
				反馈邮箱：feedback@duxinai.com
			</view>
		</view>

	

		<view class="footerinfo"   >
			<view style="width:24%; text-align: right; font-size: 12px;">
				<b @click="privateClick" >《隐私政策》</b>
			</view>
			<view style="width:38%; text-align: center; font-size: 12px;">
				《个人信息手机清单》
			</view>
			<view style="width:38%; text-align: left; font-size: 12px;">
				《第三方合作清单》
			</view>
		</view>

		<view style="height:0px;">
			<TnPopup v-model="showPopup" :overlay-closeable="false" width="80%" height="700" close-btn>
			    <view class="tn-p-lg">  
				分享赚钱，轻松收益！ <br/>
				通过我们的平台，您可以将乐趣分享给朋友，还能轻松赚取丰厚奖励！轻松三步，躺赚收益：<br/>
				1、成为渠道用户：在平台认证为渠道用户后，即可激活分享赚钱功能。<br/>
				2、分享专属链接：点击小程序右上角三个点，轻松分享给朋友或朋友圈，或复制链接后在社交平台发布。<br/>
				3、好友充值，您赚收益：当好友通过您的链接首次注册并完成充值，您将立即获得 50% 的现金奖励！收益无上限！<br/>
				立即分享，赚取专属于您的收益吧！活动截止到2025年10月1日。<br/>
				*本活动最终解释权归北京图灵星辰机器人有限公司所有<br/>
				
				</view>
			    <template #closeBtn>
			      <TnIcon name="close-circle" />
			    </template>
			  </TnPopup>
		</view>



	</view>
	</view>
	<Chongzhi @callParentMethod="parentMethod" ref="czcom" />
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import TnAvatarGroup from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar-group.vue'
	import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
	import TnPopup  from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'
	import Chongzhi from './Chongzhi.vue'
	import { userInfo, reFlushToken } from '@/api/login'
	//import { onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app';

	const privateClick = () => {
		uni.navigateTo({
		  url: "/pages/index/privacypolicy/privacypolicy"
		});
	}


	
	const czcom = ref(null);
	const handleClick = () => {
		if (czcom.value) {
			czcom.value.childMethod();
		}
	}

	const showPopup = ref(false)
	const detailContent = () => {
		showPopup.value = true
	}
	
	const countnum = ref(0);
	const income = ref(0);
	const username = ref("");
	const headimg = ref("https://duxinai.com/images/tx4.jpg");
	const refcode  = ref("");
	const userproxy = ref(false);
	const init = () => {
		userInfo().then(res => {
			console.log("--------ssssssssssssssssssssss------")
			console.log(res)
			console.log(res.data.countnum )
			countnum.value = res.data.countnum
			username.value = res.data.username
			headimg.value  = res.data.avatar
			refcode.value  = res.data.refcode
			income.value   = res.data.income
			if(res.data.isproxy==1){
				userproxy.value = true
			}
		}).catch(error => {
			console.error("===========================error===========================" )
			console.error( error)
		})
	}
	init()
	
	
	const parentMethod = () => {
		//刷新token
		reFlushToken()
		userInfo().then(res => {
			console.log("parentMethod-------------userInfo: ")
			console.log( res.data) 
			countnum.value = res.data.countnum
			username.value = res.data.username
			refcode.value  = res.data.refcode
		})
	}
	
	
</script>





<style>
	.secondbody {
		margin: 0px 10px;
	}

	.gradient-background {
	  background-image: linear-gradient(to bottom, #B8D4FD, #EAEEF5);
	  height: 100%; /* 确保背景覆盖整个页面 */
	  width:  100%;
	}

	.header {
		border: 0px solid red;
		height: 80px;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.curcount {
		margin-top: 10px;
		height: 100px;
		background-color: #96B1F8;
		border-radius: 20rpx
	}

	.curText {
		display: flex;
		justify-content: left;
		align-items: center;
		padding-left: 20px;
		height: 40%;
		/* 使用100%的高度来覆盖整个屏幕 */
	}
	
	.shouyiText {
		display: flex;
		justify-content: left;
		align-items: center;
		padding-left: 20px;
		height: 30%;
		/* 使用100%的高度来覆盖整个屏幕 */
	}

	.shouyi {
		margin-top: 10px;
		height: 150px;
		background-color: #F1F8FF;
		border-radius: 20rpx;
	}

	.otherinfo {
		margin-top: 10px;
		padding: 10px 20px 20px 20px;
		border: 0px solid red;
		border-radius: 20rpx;
		background-color: white;
		overflow: hidden;
		border: 0px solid red;
		line-height: 25px;
	}

	.footerinfo {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 0px solid red;
		position: absolute; /* 设置为 absolute 进行绝对定位 */
		bottom: 90px; /* 距离父元素顶部 50px */
	}

</style>